<template>
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogTableVisible">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="部门名称" prop="deptName">
        <el-input v-model="ruleForm.deptName" />
      </el-form-item>
      <el-form-item label="上级部门" prop="parentId">
        <el-row>
            <el-col :span="21">
              <el-input v-model="parDeptName" disabled/>
            </el-col>
            <el-col :span="2">
              <el-button style="margin-left:10px;" type="primary" icon="el-icon-zoom-in" circle @click="btn_clickSelect" />
            </el-col>
          </el-row>
      </el-form-item>
      <el-form-item label="部门负责人" prop="leader">
        <el-input v-model="ruleForm.leader" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="ruleForm.sort" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio label="0">正常</el-radio>
          <el-radio label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">新增</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog append-to-body :close-on-click-modal="false" title="上级部门" width="20%" :visible.sync="selectModelShow">
      <el-tree
        ref="elTree"
        :data="tableUserData"
        @node-click="checkchange"
        node-key="id"
        :props="defaultProps">
      </el-tree>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/auth'
import { saveDept } from '@/api/home_'

export default {
  props: {
    tableUserData:{
      type:Array,
      default:[],
      required:true
    }
  },
  components: {

  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'deptName'
      },
      selectModelShow:false,
      parDeptName:"",
      httpUrl: process.env.VUE_APP_BASE_API,
      headers: {
        Authorization: 'bearer ' + getToken()
      },
      btnStr: '立即创建',
      title: '新增',
      dialogTableVisible: false,
      ruleForm: {
        'createTime': '',
        'createUserid': '',
        'deptName': '',
        'id': '',
        'leader': '',
        'parentId': '',
        'remark':'',
        'sort': '',
        'status':'0',
        'updateTime':'',
        'updateUserid':''
      },
      rules: {
        account: [
          { required: true, message: '请输入用户账号', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.parDeptName = ''
  },
  methods: {
    checkchange(v){
      this.ruleForm.parentId = v.id
      this.parDeptName = v.deptName
      this.$message.success('已选“'+v.deptName+'”部门')
      this.selectModelShow = false
    },
    // 选择父级
    btn_clickSelect() {
      this.selectModelShow = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveDept(this.ruleForm).then(res => {
            if(res.code==200){
              this.$message.success(res.msg)
              this.dialogTableVisible = false
              this.resetForm()
              this.$emit('refresh')
            }else{
              this.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.ruleForm = {
        'createTime': '',
        'createUserid': '',
        'deptName': '',
        'id': '',
        'leader': '',
        'parentId': '',
        'remark': '',
        'sort': '',
        'status': '0',
        'updateTime':'',
        'updateUserid':''
      }
    },
    setVal(v) {
      this.title ='新增'
      this.resetForm()
      this.dialogTableVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
>>>.el-upload-list{
    position:absolute !important;
    left:100px !important;
    top:-6px !important;
}
.el-form{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    .el-form-item{
        width:50%;
    }
}
</style>
